<template>
  <div style="width: calc(100vw - 200px)">
    <el-tabs type="border-card" class="demo-tabs" @tab-click="changeTab" v-model="activeName">
      <el-tab-pane name="1">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Guide /></el-icon>
            <span>全部</span>
          </span>
        </template> 
        <ExamineList
          :type="1"
          :dataList="dataList"
          v-show="isShow"
          @refresh="reflush"
          @handler-detail="toDetail"
        ></ExamineList>
      </el-tab-pane>
      <el-tab-pane name="2">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Sunny /></el-icon>
            <span>未审核</span>
          </span>
        </template>
        <ExamineList
          :type="2"
          :dataList="dataList"
          v-show="isShow"
          @refresh="reflush"
          @handler-detail="toDetail"
        ></ExamineList>
      </el-tab-pane>
      <el-tab-pane name="3">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Pouring /></el-icon>
            <span>未通过</span>
          </span>
        </template>
        <ExamineList
          :type="3"
          :dataList="dataList"
          v-show="isShow"
          @refresh="reflush"
          @handler-detail="toDetail"
        ></ExamineList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { nextTick, onMounted, provide, ref } from 'vue'
import ExamineList from '@/components/ExamineList.vue'
import request from '@/util/request'
import { ElMessage, ElNotification } from 'element-plus'

const activeName = ref('1')
const dataList = ref([])

const isShow = ref(false)

provide('reload', {
  updateData: (data) => {
    console.log('执行了', data)
    getList(0)
  }
})

const reflush = () => {
  console.log('执行了')

  getList(0)
  isShow.value = false
  nextTick(() => {
    isShow.value = true
  }, 200)
}

provide('reflush', reflush)

const changeTab = (val) => {
  console.log('切换的数据', val.paneName)
  if (val.paneName === '1') {
    getList(0)
  } else if (val.paneName === '2') {
    getList(1)
  } else if (val.paneName === '3') {
    getList(2)
  }
}
// 查询所有数据，0-全部，1-未审核，2-未通过
const getList = (val) => {
  request
    .get(`/admin/examine/clist?status=${val}`)
    .then((res) => {
      console.log('获取成功examine', res)
      if (res.code !== 200) {
        ElMessage.warning('抱歉，数据获取失败')
      } else {
        dataList.value = res.data
        isShow.value = true
      }
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        // ElMessage.error('出错了', err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  getList(0)
})
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
